<template>
	<view class="content" style="padding-top: 70rpx;">
		<view style="padding: 0 0 10rpx 10rpx;width: 65%;">
			<u-search bg-color="white" placeholder="搜索商品" v-model="keyword" shape="round" :clearabled="true" :show-action="true" action-text="搜索" @search="goSearch()" @custom="goSearch()"></u-search>
		</view>
		<view class="wrap">
			<u-swiper :list="lunboImg" height="520px"></u-swiper>
		</view>
		<view id="pinpaiBox">
			<view class="pinpaiBox-head">
				<view class="jiameng">加盟品牌</view>
				<view class="allpinpai" @click="allPinpai()">全部品牌 <span>></span></view>
			</view>
			<view class="pinpais" v-if="pinpaiList.length>0">
				<view class="pinpai" v-for="(item,i) in pinpaiList" :key="item.id" @click="goPinpai(item.id)">
					<image :src="switchImg(pinpaiList,i)" style="width: 50px;height: 60px;"></image>
					<view class="pinpaiName">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 所有商品分页显示 -->
		<view class="good-box" v-if="allGoods.length>0">
			<view class="goods-item" v-for="(item,i) in allGoods" :key="item.gid" @click="goDetail(item.gid)">
				<image :src="switchImages(isNull(item.gimages) ? item.gImages : item.gimages)" class="goods-img"></image>
				<view class="fgx">
					<view class="goods-miaoshu">{{isNull(item.gname) ? item.gName : item.gname}}</view>
					<view class="small-container">
						<view>
							<text class="qian">{{isNull(item.gprice) ? item.gPrice : item.gprice}}</text>
						</view>
						<view>
							<!-- <image src="../../static/index/gm.png" class="xiaoche" @click.stop="jiaGou(item.gid,isNull(item.gprice) ? item.gPrice : item.gprice,item.guige)"></image> -->
							<image src="../static/index/gm.png" class="xiaoche" @click.stop="jiaGou(item.gid,i,item.guige)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tips-text">{{tips}}</view>
		<!-- <u-loadmore :status="status" /> -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<!-- <u-tabbar v-model="current" :list="list" :mid-button="false" @change="tab"></u-tabbar> -->
		<view class="tabbar">
			<view style="text-align: center;color: #FF7900;">
				<uni-icons type="home" color="#FF7900" size="20"></uni-icons>
				<view>品牌共享</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(1)">
				<uni-icons type="list" size="20"></uni-icons>
				<view>分类</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(2)">
				<uni-icons type="cart" size="20"></uni-icons>
				<view>购物车</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(3)">
				<uni-icons type="person" size="20"></uni-icons>
				<view>个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 底部tab
				list:[
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '品牌共享',
						customIcon: false,
						pagePath: "/pages/pinpai/index"
					},
					{
						iconPath: "coupon",
						selectedIconPath: "coupon-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/pinpai/goods/goodsFenlei"
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/pinpai/cart/cart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/pinpai/center/center"
					},
				],
				current:0,
				rawList:[],		// 轮播图原始数据
				sort:2,			// 排序规则， 0销量  1上架时间  2权重(推荐)  都为降序
				allGoods:[ ],	// 分页查询的商品
				page:1,			// 当前页数
				limit:10,		// 每页数量
				status:'loadmore',// nomore:没有更多了  loading:努力加载中...  loadmore:轻轻上拉加载更多...
				scrollTop: 0,	// 用于返回顶部
				pinpaiList:[],	// 启用品牌集合
				keyword:'',		// 搜索框数据
				isSousuo:false,	// 是否在搜索
				tips:"上拉加载更多数据",
			}
		},
		onLoad() {
			this.init()
			uni.$on('init', this.init)
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			//底部tab跳转
			tabbarPage(index){
				uni.redirectTo({
					url:index==1?'goods/goodsFenlei':(index==2?'cart/cart':'center/center')
				})
			},
			//点击品牌
			goPinpai(id){
				uni.navigateTo({
					url:'pinpai/pinpaiDetail?ppid='+id
				})
			},
			//点击全部品牌
			allPinpai(){
				uni.navigateTo({
					url:'pinpai/pinpaiList'
				})
			},
			//搜索
			goSearch(){
				// console.log("来搜索了："+this.keyword)
				this.allGoods = [];
				this.page = 1;
				if(this.keyword==null || this.keyword=="" || this.keyword==undefined){
					this.isSousuo = false;
					this.tips = "上拉加载更多数据";
					this.getIndexGoodsInfo()
				}else{
					this.isSousuo = true;
					this.$http.get('/ppGoodsSolr/search',{
						page:this.page,
						limit:this.limit,
						key:this.keyword
					}).then(res => {
						if(res.data.length > 0){
							if(uni.getStorageSync('logined')){//用户登录了
								//验证用户是否是会员，是否需要减直推奖
								for (var i = 0; i < res.data.length; i++) {
									this.$http.get('/ppgoods/getPPGoodsHyjia',{
										gid:res.data[i].gid,
										userid:uni.getStorageSync('usersId')
									}).then(res => {
										if(res.data.code==200){
											res.data[i] = res.data.data;
											this.allGoods = this.allGoods.concat(res.data[i]);
										}
									})
								}
								if(res.data.length == this.limit){
									this.tips = "上拉加载更多数据";
								}else{
									this.tips = "没有更多数据"
								}
							}else{
								this.allGoods = this.allGoods.concat(res.data)
								if(res.data.length == this.limit){
									this.tips = "上拉加载更多数据";
								}else{
									this.tips = "没有更多数据"
								}
							}
						}else{
							this.tips = "没有更多数据"
						}
					})
					// console.log("品牌共享首页商品1",this.allGoods)
				}
			},
			//得到首页商品数据
			getIndexGoodsInfo(){
				// 查询首页商品
				if(uni.getStorageSync('logined')){// 会员登录显示价格
					this.$http.get('/ppgoods/getGoodsByuser', {
						page:this.page,
						limit:this.limit,
						userid:uni.getStorageSync('usersId')
					}).then(res => {
						if(res.data.data.length > 0){
							this.allGoods = res.data.data;
						}else{
							this.tips = '没有更多数据'
						}
					})
				}else{// 未登录显示价格
					this.$http.get('/ppgoods/getGoodsNologin', {
						page:this.page,
						limit:this.limit,
					}).then(res => {
						if(res.data.data.length > 0){
							this.allGoods = res.data.data;
						}else{
							this.tips = '没有更多数据'
						}
					})
				}
				// console.log("品牌共享首页商品2",this.allGoods)
			},
			//初始化首页数据
			init(){
				// 查询轮播图
				this.$http.get('/pplunbotu/getLunbotu', {
					
				}).then(res => {
					this.rawList = res.data.data;
				})
				// 查询首页商品
				this.getIndexGoodsInfo();
				// 得到所有启用品牌
				this.$http.get('/pppingpai/selectAllPingpai', {
					
				}).then(res => {
					this.pinpaiList = res.data.data;
				})
			},
			tab(e){
				this.current = e;
			},
			// 点击小车加购
			jiaGou(gid,i,guige){
				let jia = this.allGoods[i].gprice;
				if(this.isNull(jia)){
					jia = this.allGoods[i].gPrice;
				}
				// console.log("商品ID："+gid+" 价格："+i+" 规格："+guige)
				if(uni.getStorageSync("logined")){
					if(this.isNull(guige)){
						let userid = uni.getStorageSync("usersId");
						this.$http.get('/ppgxShopCat/addShopCat', {
							userid:uni.getStorageSync('usersId'),
							gid:gid,
							catnum:1,
							money:jia
						}).then(res => {
							if(res.data.code==0){
								this.$u.toast("成功加入购物车");
								uni.$emit("getPinpaiCat");
							}else{
								this.$u.toast(res.data.msg);
							}
						})
					}else{
						uni.navigateTo({
							url:'goods/goodsDetail?gid='+gid+'&showAddCartBox=true'
						})
					}
				}else{
					this.$u.toast("请先登录");
					return;
				}
			},
			//处理图片
			switchImg(obj,n){
				if(obj.length>0){
					return this.host+'/image/pingpaiLogo/'+obj[n].logo;
				}else{
					return '../static/index/gm.png';
				}	
			},
			switchImages(images){
				if(!this.isNull(images)){
					return this.host+images
				}else{
					return '../static/index/gm.png';
				}
			},
			//跳转商品详情页面
			goDetail(gid){
				uni.navigateTo({
					url:'goods/goodsDetail?gid='+gid
				})
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
	
		// 滑倒底部上拉加载
		onReachBottom() {
			if(this.tips=='上拉加载更多数据'){
				this.page++;
				// 查询首页商品
				if(this.isSousuo){
					this.$http.get('/ppGoodsSolr/search',{
						page:this.page,
						limit:this.limit,
						key:this.keyword
					}).then(res => {
						if(res.data.length > 0){
							this.allGoods = this.allGoods.concat(res.data)
						}else{
							this.tips='没有更多数据'
						}
					})
				}else{
					if(uni.getStorageSync('logined')){// 会员登录显示价格
						this.$http.get('/ppgoods/getGoodsByuser', {
							page:this.page,
							limit:this.limit,
							userid:uni.getStorageSync('usersId')
						}).then(res => {
							if(res.data.data.length > 0){
								this.allGoods = this.allGoods.concat(res.data.data);
							}else{
								this.tips='没有更多数据'
							}
						})
					}else{// 未登录显示价格
						this.$http.get('/ppgoods/getGoodsNologin', {
							page:this.page,
							limit:this.limit,
						}).then(res => {
							if(res.data.data.length > 0){
								this.allGoods = this.allGoods.concat(res.data.data);
							}else{
								this.tips='没有更多数据'
							}
						})
					}
				}
			}
		},
		computed:{
			lunboImg(){
				let tu=[	];
				for(let i=0;i<this.rawList.length;i++){
					let obj = {	};
					obj.image=this.host+'/image/ppLunbotu/'+this.rawList[i].images;
					obj.title=this.rawList[i].title;
					tu.push(obj);
				}
				return tu;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pinpaiName{
		overflow: hidden;
		 -webkit-line-clamp: 3;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-box-orient: vertical; 
	}
	.tips-text{
		text-align: center;
		padding-top: 20px;
		// padding-bottom: 125rpx;
	}
	.tabbarImage{
		width: 20px;
		height: 20px;
	}
	.tabbar{
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		justify-content: space-around;
		background-color: white;
		font-size: 11px;
		padding: 20rpx 0 20rpx 0;
		border-top: 1rpx #DCDFE6 solid;
	}
	
	.pinpais{
		display: flex;
		flex-wrap: nowrap;
		text-align: center;
	}
	.pinpai{
		width: 50px;
		margin-right: 26rpx;
	}
	#pinpaiBox{
		width: 100%;
		overflow-x: scroll;
		position: relative;
		background-color: white;
	}
	.pinpaiBox-head{
		display: flex;
		padding:10px 15px;
		justify-content: space-between;
		font-family: '微软雅黑';
	}
	.pinpaiBox-head .jiameng{
		font-size: 18px;
		font-weight: bold;
	}
	.pinpaiBox-head .allpinpai{
		font-size: 12px;
		color: #999;
	}
	.fonts{
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	page{
		background-color: #f1f1f1;
	}
	.search-input{
		// border: 1px solid #E4E7ED;
		background-color: white;
		width: 500rpx;
	}
	.fenlei-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.fenlei-box .fenlei-item{
		margin: 10rpx 30rpx;
	}
	.renpintj{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.tuijianbox {
	    padding-top: 10px;
	    width: 200rpx;
	    height: 220rpx;
	    text-align: center;
	    color: white;
	    background-repeat: no-repeat;
	    background-size: 100%;
	}
	.tuijianbox .fonts{
		font-size: 16rpx;
		position: relative;
		top: 10rpx;
	}
	.tuijianbox .tui-img{
		margin: auto;
	}
	.tuijianbox:nth-child(1) {
	    background-image: url('../static/index/kk-1.png');
	}.tuijianbox:nth-child(2) {
	    background-image: url('../static/index/kk-2.png');
	}.tuijianbox:nth-child(3) {
	    background-image: url('../static/index/kk-3.png');
	}
	.tab-box{
		display: flex;
		margin-top: 20rpx;
		padding-left: 20rpx;
	}
	.tab-box .active{
		border-bottom: 5rpx solid red;
	}
	.tab-box .tab-item{
		margin-right: 20rpx;
	}
	.good-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding-bottom: 10rpx;
	}
	.goods-item {
	    width: 49%;
	    margin: 10rpx auto;
	    background-color: white;
	    padding: 20rpx 5rpx;
	}
	.goods-item .goods-img {
	    height: 300rpx;
	    width: 100%;
	    display: block;
	    margin: auto;
	}
	.fgx {
	    border-top: 1px solid #ccc;
	    width: 80%;
	    margin: auto;
	    margin-top: 0.625rem;
		padding-top: 10rpx;
	}
	.qian{
		font-size: 15px;
		font-weight: bold;
		color: red;
	}
	.qian::before {
	    content: '￥';
	    color: red;
	    font-size: 10px;
	    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	}
	.goods-miaoshu{
		display:-webkit-box;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-line-clamp:1;
		-webkit-box-orient:vertical;
	}
	.small-container {
		margin-top: 10rpx;
	    display: flex;
	    justify-content: space-between;
	}
	.small-container>view:nth-child(2)>.xiaoche {
	    width: 45rpx;
		height: 45rpx;
	}
	.good-box::after{
		content: '';
		width: 50%;
	}
</style>
